<template>
	<div class="elcontainer">
		<div style="height: 220px;"><Video ref="video"></Video></div>
		<div class="viewNum">
			<b>{{info.title}}</b>
			<div><img src="../../../static/img/dp2.png" alt="">{{pv>10000?(((pv-pv%1000)/10000+'w')):(pv)}}次播放</div>
		</div>
		<div class="contTitle">
			<img :src="info.roomPoster==''?defaultCover:info.roomPoster" alt="">
			<b>{{info.pageTitle}}</b>
		</div>
		<div class="contMenu">
			<div v-for="(item, i) in menulist" :key="i" @click="menuClick(i)"><span :class="activeNum==i?'active':''">{{item}}</span></div>
		</div>
		<div class="cont">
			<programme v-if="activeNum==1" @getToken="getToken" />
			<chat v-if="activeNum==0"/>
		</div>
	</div>
</template>

<script>
	import Video from "./videos"; //视频
	import programme from "./programme"; //节目单
	import chat from "./chats"; //节目单
	export default {
		data() {
			return {
				defaultCover: require("../../../static/img/miguDefault.png"),
				menulist: ["评论", "节目单"],
				liveImgShow: false,
				activeNum: 0,
				info: "",
				pv: ""
			};
		},
		components: {
			Video,
			programme,
			chat
		},
		computed: {},
		created() {
			this.getToken();
		},
		methods: {
			getViewNumber(info) {
			  /*观看人数*/
			  this.$http
			    .get(this.$api.getViewNum(this.$route.params.id))
			    .then(res => {
			      if (res.data.code == 0) {
			        // if (info.viewerSwitch == 1) {
			        //   this.pv = info.viewerBastic + res.data.pv * info.viewerTimes;
			        // } else {
			          this.pv = res.data.pv;
			        // }
			        // this.chatNum = res.data.num;
			      }
			    });
			},
			menuClick(e) {
				this.activeNum = e
			},
			imgClick() {
				this.$toast({
					message: "当前频道不在直播中，请稍后再来",
					duration: 1500,
				});
			},
			getToken() {
				this.$http.get(this.$api.openGetToken(), {
					params: {
						appId: "SvZVTQST1CDnNoBb2BX1SFXcLCiuWZyf"
					}
				}).then(res => {
					console.log(res.data)
					this.init(res.data)
					sessionStorage.setItem("random", res.data.random);
					sessionStorage.setItem("timeStamp", res.data.timeStamp);
					sessionStorage.setItem("grantType", res.data.grantType);
					sessionStorage.setItem("authToken", res.data.authToken);
				})
			},
			// 初始化h5接口
			init(info) {
				this.$http.get(this.$api.openliveinfo(), {
					params: {
						appId: "SvZVTQST1CDnNoBb2BX1SFXcLCiuWZyf",
						random: info.random,
						timeStamp: info.timeStamp,
						grantType: info.grantType,
						singal: info.authToken,
						roomId: this.$route.params.id,
						userName: "人民网",
					}
				}).then(res => {
					if (res.data.code == 0) {
						sessionStorage.setItem("companyId", res.data.live_room_info.companyId);
						sessionStorage.setItem("id", res.data.live_room_info.id);
						sessionStorage.setItem("nickname", res.data.name);
						sessionStorage.setItem("userId", res.data.openId);
						document.title = res.data.live_room_info.title; //网址标题
						this.info = res.data.live_room_info;
						this.$store.state.liveInfo = res.data.live_room_info;
						this.$refs.video.testStatus(res.data.live_room_info);
						this.$refs.video.getUserCollect(1, res.data); //登录心跳
						this.getViewNumber(res.data.live_room_info);
						setInterval(() => {
							this.getViewNumber(res.data.live_room_info);
						}, 30000);
					}
				});
			},
		}
	};
</script>
<style lang="less" rel=stylesheet/less scoped="scoped">
	.elcontainer {
		background: #fafafa;
	}

	.cont {
		height: calc(100% - 365px);
		background: #fff;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		/*解决ios滚动不流畅*/
	}

	.viewNum,
	.contMenu,
	.contTitle {
		padding: 0 10px;
		width: calc(100% - 20px);
		border-bottom: 1px solid #f1f1f1;
		overflow: hidden;

		b {
			font-size: 15px;
		}
	}

	.active {
		border-bottom: 2px solid #e32416;
		color: #e32416;
	}

	.contTitle {
		text-align: left;
		height: 60px;
		line-height: 60px;
		display: flex;
		align-items: center;
		img {
			width: 45px;
			height: 45px;
			border-radius:45px;
			margin-right: 10px;
		}
	}

	.viewNum {
		display: flex;
		justify-content: space-between; // align-items: center;
		height: 40px;
		line-height: 40px;
		div {
			width: 180px;
			text-align: right;
			font-size: 12px;
			color: #666;
			overflow: hidden;
			img {
				width: 20px;
				height: 20px;
				vertical-align:middle;
				margin-right: 5px;
			}
		}
	}

	.contMenu {
		display: flex;
		font-size: 15px;
		padding: 10px 0;

		div {
			width: 100%;

			span {
				padding: 10px 0;
			}
		}
	}
</style>
